<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<title>Document</title>
	</head>
	<body>
		<div id="root"></div>

		<script type="text/babel">
			class Demo extends React.Component {
			  state = { isHot: false }

			  saveInput = (c) => {
				this.input1 = c
				console.log(c);
			  }

			  showData = () => {
				const { input1 } = this
				alert(input1.value)
			  }
			  
			  changeWeather=()=>{
				  const { isHot } = this.state
				  this.setState=({
					  isHot:!isHot
				  })
			  }
			  render() {
				const { isHot } = this.state
				return (
				  <div>
					<h2>今天天气很{isHot ? '炎热' : '寒冷'}</h2>
					<input ref={this.saveInput} type="text" /><br/><br/>
					<button onClick={this.showData}>点我提示数据</button>
					<button onClick={this.changeWeather}>点我切换天气</button>
					
				  </div>
				)
			  }
			}

    ReactDOM.render(<Demo />, document.getElementById('root'))
  </script>
	</body>
</html>
